<script setup lang="ts">
const props = defineProps<{
  editingBuyerMessage: string
  isFullscreen: boolean
}>()
const emits = defineEmits<{
  (e: 'close', isSubmit?: boolean): void
  (e: 'update:editingBuyerMessage', value: string): void
  (e: 'update:isFullscreen', value: boolean): void
}>()

const onInput = (e: UniHelper.InputOnInputEvent) => {
  let value = e.detail.value
  if (value.length > 200) value = value.slice(0, 200)
  emits('update:editingBuyerMessage', value)
}
const onSubmit = () => {
  emits('close', true)
}
const { safeAreaInsets } = uni.getWindowInfo()
</script>

<template>
  <view
    class="buyer-message-panel"
    :style="{ height: isFullscreen ? `calc(100vh - ${safeAreaInsets.bottom}px)` : '80vh' }"
  >
    <!-- 关闭按钮 -->
    <text class="close icon-close" @tap="emits('close')"></text>
    <!-- 标题 -->
    <view class="title">留言</view>
    <!-- 内容 -->
    <view class="content">
      <view class="textarea">
        <textarea
          placeholder="建议留言前先与商家沟通确认"
          :value="props.editingBuyerMessage"
          @input="onInput"
          :maxlength="200"
          @tap="emits('update:isFullscreen', true)"
        >
        </textarea>
        <text>{{ props.editingBuyerMessage.length }}/200</text>
      </view>

      <button @tap="onSubmit">确定</button>
    </view>
  </view>
</template>

<style lang="scss">
.buyer-message-panel {
  display: flex;
  flex-direction: column;
  position: relative;

  padding: 0 30rpx;
  height: 80vh;
  border-radius: 10rpx 10rpx 0 0;

  background-color: #fff;

  transition: 0.3s;
}

.title {
  line-height: 1;
  padding: 40rpx 0;
  text-align: center;
  font-size: 32rpx;
  font-weight: normal;
  color: #444;
}

.close {
  position: absolute;
  right: 24rpx;
  top: 24rpx;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .textarea {
    position: relative;
    font-size: 28rpx;

    textarea {
      width: 100%;
      height: 25vh;
      border-radius: 30rpx;
      padding: 40rpx 25rpx;
      box-sizing: border-box;
      background-color: #f5f5f6;
    }

    text {
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
      color: #8f939c;
    }
  }

  button {
    height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
  }
}
</style>
